<template>
    <el-dialog :close-on-click-modal="false" :visible="addFlag" class="zdy-dialog" width="700px" :title="$t('Add')" :lock-scroll="false" :before-close="handleCloseDialog">
        <el-form :model="form" class="pop-form-box" :rules="rules" ref="ruleForm">
          <!--用户名-->
          <el-form-item :label="$t('username')" prop="userName">
            <el-input v-model="form.userName"  :minlength="$rules.userName.min"
                      :maxlength="$rules.userName.max"
                      show-word-limit></el-input>
          </el-form-item>
          <!--角色-->
          <el-form-item :label="$t('CHARACTERS')" prop="role">
            <!--请选择角色-->
            <el-select v-model="form.role" :placeholder="$t('Please select a role')">
              <el-option :label="item.label" :value="item.value" v-for="(item,index) in docType" :key="index" ></el-option>
            </el-select>
          </el-form-item>
          <!--密码-->
          <el-form-item :label="$t('Password')" prop="password">
            <el-input v-model="form.password" clearable type="password" show-password></el-input>
          </el-form-item>
          <!--确认密码-->
          <el-form-item :label="$t('confirm password')" prop="passwordAck">
            <el-input v-model="form.passwordAck" clearable type="password" show-password></el-input>
          </el-form-item>
          <!--姓名-->
          <el-form-item :label="$t('name')" prop="name">
            <el-input v-model="form.name" :minlength="$rules.name.min"
                      :maxlength="$rules.name.max"
                      show-word-limit></el-input>
          </el-form-item>
            <!--超级管理员限制1个，管理员限制2个，普通用户限制5个-->
            <p>{{this.i18n.t('The maximum number of super administrators is 1, the maximum number of administrators is 2, and the maximum number of common users is 5')}}</p>
            <div class="footBtnBox">
                <el-button size="small" type="handle" @click="handleCloseDialog">{{this.i18n.t('Cancel')}}</el-button>
                <el-button size="small" type="primary" @click="submitForm">{{this.i18n.t('save')}}</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script>
    import { getLocalUserInfo } from "@/assets/common/js/global";
    import {accountinfoCreate} from "@/api/zhgl";
    import { cachestroeGet } from '@/api/login.js';
    export default {
        name: "addDevice",
        props: {
            addFlag: {
                type: Boolean,
                default: false
            },
            editTableRow: {
                type: Object,
                defautl: () => {
                    return {}
                }
            }
        },
        data(){
            var validatePasswordAck = (rule, value, callback) => {
                // debugger
                console.log(value);
                if (value == ''||value==undefined) {
                    // 请再次输入密码
                    callback(new Error(this.i18n.t('Please enter your password again')));
                }else if(!this.$rules.password.reg.test(value)){
                    callback(new Error(this.i18n.t('Only English and numbers can be entered')+' '+this.$rules.password.errMsg+" " + this.$rules.password.min + '~' + this.$rules.password.max +' '+this.i18n.t('bits')));
                }else if (value!=this.form.password) {
                    // 两次输入密码不一致
                    callback(new Error(this.i18n.t('The two password does not match！')));
                }else {
                    callback();
                }
            };
            var validatePassword = (rule, value, callback) => {
                // debugger
                console.log(value);
                if (value == ''||value==undefined) {
                    // 请输入密码
                    callback(new Error(this.i18n.t('Please enter password')));
                }else if (!this.$rules.password.reg.test(value)) {
                    callback(new Error(this.i18n.t('Only English and numbers can be entered')+' '+this.$rules.password.errMsg+" " + this.$rules.password.min + '~' + this.$rules.password.max +' '+this.i18n.t('bits')));
                }else {
                    callback();
                }
            };
            var validateName = (rule, value, callback) => {
                console.log(value);
                if (value == ''||value==undefined) {
                    // 请输入姓名
                    callback(new Error(this.i18n.t('Please enter your name')));
                }else if (!this.$rules.name.reg.test(value)) {
                    callback(new Error(this.$rules.name.min + '~' + this.$rules.name.max +' '+this.i18n.t('bits')));
                }else {
                    callback();
                }
            };
            var validateUserName = (rule, value, callback) => {
                // debugger
                console.log(value);
                if (value == ''||value==undefined) {
                    // 请输入用户名
                    callback(new Error(this.i18n.t('Please enter user')));
                }else if (!this.$rules.userName.reg.test(value)) {
                    callback(new Error(this.i18n.t('English, numbers') + this.$rules.userName.min + '~' + this.$rules.userName.max+' '+this.i18n.t('bits')));
                }else {
                    callback();
                }
            };
            return{
                rules: {
                    passwordAck:[
                        { validator: validatePasswordAck,required: true, trigger: 'blur' }
                    ],
                    password:[
                        { validator: validatePassword,required: true, trigger: 'blur' }
                    ],
                    name:[
                        { validator: validateName,required: true, trigger: 'blur' }
                    ],
                    userName: [
                        { validator: validateUserName,required: true, trigger: 'blur' }
                    ],
                },
                value: 0,
                createBy: "",
                saveDisabled:false,
                docType:[
                    {
                        // 超级管理员
                        label: this.i18n.t('Super administrator'),
                        value: 0
                    },
                    {
                        // 管理员
                        label:this.i18n.t('Administrator'),
                        value: 1
                    },
                    {
                        // 普通用户
                        label: this.i18n.t('common User'),
                        value: 2
                    }
                ],
                form:{
                    sbmc:'',
                    role:0,
                }
            }
        },
        methods:{
            /**
             * @description  关闭弹窗事件
             * @return not
             * @author xiongyi 2022-06-29 16:48:08
             **/
            handleCloseDialog() {
                this.$emit('update:addFlag', false);
                if (this.fileName) {
                    this.fileName = "";
                    this.$refs.upload.clearFiles()
                }
            },
            handleClick(tab, event) {
                console.log(tab, event)
            },
            // 刷新列表
            parentUpdate(){
                this.$emit("update:addFlag",false);
                this.$parent.$refs.globalTable.loading_data();
            },
            // 添加人员
            accountinfoCreate(params){
                accountinfoCreate(params).then((res) => {
                    if (res.code === 200) {
                        // 添加成功
                        this.W.$tips("success", this.i18n.t('Add successfully!'));
                        this.parentUpdate()
                    }
                }).catch().finally(() => {
                    setTimeout(() => {
                    }, 500)
                })
            },
            // 获取缓存
            cachestroeGet(key){
                return cachestroeGet(key)
            },
            /**
            * @description  保存新增活修改数据
            * @param  not
            * @return not
            * @author xiongyi 2022-07-06 10:50:18
            **/
            submitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        const sendData = JSON.parse(JSON.stringify(this.form));
                        let params={
                            userName:sendData.userName,
                            name:sendData.name,
                            role:sendData.role,
                            password:sendData.password,
                            createBy:this.createBy
                        }
                        this.accountinfoCreate(params)
                    }
                })

            },
        },
        async mounted(){
            var userInfo=await this.cachestroeGet("userInfo")
            this.createBy=userInfo.username||'sysadmin'
        }
    }
</script>

<style scoped>

</style>
